<template>
  <div class="title">{{ title }}</div>
  <div class="container">
    <el-form class="screach" :inline="true" :model="formData">
      <el-form-item label="任务标题">
        <el-input v-model="formData.name" placeholder="请输入任务标题" clearable />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="formData.date" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" @change="onChanegTime" />
      </el-form-item>
      <el-form-item label="任务状态">
        <el-select v-model="formData.status" placeholder="全部状态">
          <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查找</el-button>
        <el-button @click="onReset">清空</el-button>
      </el-form-item>
    </el-form>
    <div class="rigth_btn">
      <el-button type="primary" @click="onCreate">新建任务</el-button>
      <el-button @click="onReset">任务设置</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, defineProps } from 'vue'
  const props = defineProps({
    title: {
      type: String,
      default: '自动加好友'
    }
  })
  const emit = defineEmits(['submit', 'reset'])
  const option = [
    {
      value: 0,
      label: '全部状态'
    },
    {
      value: 1,
      label: '未开始'
    },
    {
      value: 2,
      label: '进行中'
    },
    {
      value: 3,
      label: '已完成'
    },
    {
      value: 4,
      label: '已暂停'
    }
  ]
  const formData = reactive<any>({
    name: '',
    date: [],
    status: 0
  })
  const onChanegTime = (v: any) => {
    v ? (formData.date[1] = `${v[1].split(' ')[0]} 23:59:59`) : (formData.date = [])
    console.log('时间筛选', formData.date)
  }
  const onSearch = () => {
    console.log('submit!')
  }
  const onReset = () => {
    formData.name = ''
    formData.date = []
    formData.status = 0
  }
  const onCreate = () => {
    console.log('新建任务')
  }
  const onSite = () => {
    console.log('任务设置')
  }
</script>
<style lang="scss" scoped>
  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .container {
    display: flex;
    justify-content: space-between;
    .screach {
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
</style>
